<template>
    <div class="sidebar-container">
        <el-menu router default-active="/home" class="el-menu-vertical-demo" :collapse="isCollapse" @open="handleOpen"
            @close="handleClose">
            <template :key="route.path" v-for="route in sidebarRoutes">
                <MenuItem :route="route">
                </MenuItem>
            </template>
        </el-menu>
    </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import MenuItem from './components/MenuItem.vue'
import { useRoutesStore } from "@/stores/router";
defineOptions({
    name: 'sidebar',
    inheritAttrs: true,
})
const routes = ref([])


const sidebarRoutes = computed(() => {
    const filterRoutes = routes => {
        /**
         * 后续这里可以递归剔除不符合条件的路由
         */
        return routes
    }
    return filterRoutes(routes.value) //这里不能从router.getRoutes()里面的数据不适合处理成菜单栏，直接用后端返回的菜单栏数据
})

const handleOpen = () => { }
const handleClose = () => { }
const isCollapse = ref(false)

onMounted(async () => {
    const routesStore = useRoutesStore();
    routes.value = routesStore.sideBarRoutes;
})
</script>

<style scoped lang="scss">
.sidebar-container {
    background-color: #fff;
}
</style>
